<template>
	<view class="">
		<u-sticky>
			<div class="banner">
				<image :src="banner" mode="widthFix"></image>
			</div>
		</u-sticky>
		<div v-if="gjp">
			<u-skeleton :loading="true" :animate="true" rows="7"  rowsHeight="100"></u-skeleton>
		</div>
		
		<div class="zwxqPage" v-else>
			<div class="container">
				<div class="item">
					<h3>{{ zw.zwmc }}</h3>
					<div class="tags">
						<div>
							<u-tag :text="zw.year" type="error" plain plainFill size="mini"></u-tag>
						</div>
						<div>
							<u-tag :text="zw.zwxz" type="success" plain plainFill size="mini"></u-tag>
						</div>
						<div>
							<u-tag :text="zw.zy == '不限' ? '不限专业' : '限专业' " type="warning" plain plainFill size="mini"></u-tag>
						</div>
					</div>
					<ul>
						<li><span>招录人数</span> <i>{{ zw.zkrs }}</i></li>
						<li><span>部门代码</span> <i>{{ zw.bmdm }}</i></li>
						<li><span>职位代码</span> <i>{{ zw.zwdm }}</i></li>
						<li><span>招考单位</span> <i>{{ zw.bmmc }}</i></li>
					</ul>
				</div>
				<div class="item" v-if="year >1000">
					<h3>报名数据</h3>
					<div class="flexBox">
						<div class="bmrs_color">{{ zw.jfrs }}<span>缴费成功人数</span></div>
						<div class="bmrs_color">{{ zw.jfrs ? showJzb(zw.jfrs,zw.zkrs) : 0 }}<span>竞争比</span></div>
					</div>
					
					<p class="warningText">* 数据来源网络（白雪面试整理发布）</p>
				</div>
				<div class="item" v-if="year >1000">
					<h3>分数详情</h3>
					<div class="">
						<div class="bmrs_color">
							<ul>
								<li>{{zw.jmfs}}<span>笔试分数</span></li>
								<li>{{zw.msfs}}<span>面试分数</span></li>
								<li>{{zw.zfs}}<span>总分数</span></li>
							</ul>

						</div>
						<div class="con" v-if="conIndex == 2">
							<div class="fsBox" v-if="bmrsList.length >0">
								<div class="tableBox" v-for="(bmrs,index) in bmrsList" :key="index">
									<u-row>
										<u-col span="2">
											<div class="th">年份</div>
										</u-col>
										<u-col span="2">
											<div class="th">职位代码</div>
										</u-col>
										<u-col span="2">
											<div class="th">招考人数</div>
										</u-col>
										<u-col span="3">
											<div class="th">缴费人数</div>
										</u-col>
										<u-col span="3">
											<div class="th">详情</div>
										</u-col>
									</u-row>
									<u-row v-for="(b,j) in bmrs.list" :key="j" align="stretch">
										<u-col span="2">
											<div class="td">{{ bmrs.year }}</div>
										</u-col>
										<u-col span="2">
											<div class="td">{{ b.zwdm }}</div>
										</u-col>
										<u-col span="2">
											<div class="td">{{ b.zkrs }}</div>
										</u-col>
										<u-col span="3">
											<div class="td">{{ b.jfrs }}</div>
										</u-col>
										<u-col span="3">
											<div class="td">
												<div class="btnWidth">
													<u-button type="error" shape="circle" size="mini" text="查看" @click="showIndex = (index + '-' + j)"></u-button>
												</div>
											</div>
										</u-col>
										<u-popup :show="showIndex == (index + '-' + j)" @close="showIndex = -1" >
											<div class="popContent">
												<div class="info">
													<h3>单位信息</h3>
													<ul>
														<li><span>地区:</span>{{zw.city}}</li>
														<li><span>所属系统:</span>{{zw.xt}}</li>
														<li><span>部门名称:</span>{{zw.bmmc}}</li>
														<li><span>部门代码:</span>{{zw.bmdm}}</li>
														<li><span>用人处（科）室:</span>{{zw.yrcs}}</li>
													</ul>
													<h3>报考条件</h3>
													<ul>
														<li><span>招考对象:</span>{{b.zkdx}}</li>
														<li><span>学历:</span>{{b.xl}}</li>
														<li><span>专业:</span>{{b.zy}}</li>
														<li><span>工作经历:</span>{{b.gzjl}}</li>
														<li><span>政治面貌:</span>{{b.zzmm}}</li>
														<li><span>岗位最低服务年限:</span>{{b.fwnx}}</li>
														<li><span>备注:</span>{{b.bz}}</li>
													</ul>
												</div>
											</div>
										</u-popup>
									</u-row>
									
								</div>
							</div>
							<div class="fsBox" v-else>
								<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
							</div>
						</div>
						<p class="warningText">* 数据来源网络（雪恒教育-白雪面试整理发布）</p>
					</div>
					<p class="warningText">* 数据来源网络（白雪面试整理发布）</p>
				</div>
				<div class="item">
					<div class="btnBox" @click="showYcBox = true">
						<image src="https://www.baixuemianshi.com/zhuanti/sk_stl/images/yc_btn.png" mode="widthFix"></image>
					</div>
					<div class="ycBox" v-if="showYcBox">
						<div class="inpBox">
							<div class="label">第一次模考分数</div>
							<u--input placeholder="第一次模考分数" type="digit" border="surround" v-model="ycInfo.mk1"></u--input>
						</div>
						<div class="inpBox">
							<div class="label">第二次模考分数</div>
							<u--input placeholder="第二次模考分数" type="digit" border="surround" v-model="ycInfo.mk2"></u--input>
						</div>
						<div class="inpBox">
							<div class="label">第三次模考分数</div>
							<u--input placeholder="第三次模考分数" type="digit" border="surround" v-model="ycInfo.mk3"></u--input>
						</div>
						<div class="btns">
							<div class="btn">
								<u-button type="success" shape="circle" text="立即参与模考" @click="toZx" ></u-button>
							</div>
							<div class="btn">
								<u-button type="error" shape="circle" text="立即预测" @click="toyuce" ></u-button>
							</div>
						</div>
						
						<div class="yc" v-if="showYc">
							<div class="conBox">
								<zui-progress-circle direction="clockwise" fix-overlay linecap="round" :debug="debugMode" :position="position" :size="240" :ring-width="24" :range="ringRange" :texture="texture" />
								<view class="perBox">
								  <text class="value">{{ percent }}</text>
								  <text class="unit">%</text>
								</view>
							</div>
							<div class="btn">
								<u-button type="error" shape="circle" text="重新预测" @click="cxYc()" ></u-button>
							</div>
							
						</div>
						
						<div class="loadYc" v-if="loadYc">
							<image src="https://www.baixuemianshi.com/zhuanti/tiku/images/loading.gif" mode="widthFix"></image>
						</div>
					</div>
				</div>
				<div class="tabBox">
					<ul class="tabTlt">
						<li @click="conIndex3 = 1" :class="conIndex3 == 1 ? 'cur' : ''">竞争比前三岗位</li>
						<li @click="conIndex3 = 2" :class="conIndex3 == 2 ? 'cur' : ''">报名前三岗位</li>
					</ul>
					<div class="tabContent">
						<div class="con" v-if="conIndex3 == 1">
							<u-row>
								<u-col span="5">
									<div class="td">部门名称</div>
								</u-col>
								<u-col span="3">
									<div class="td">部门代码</div>
								</u-col>
								<u-col span="2">
									<div class="td">报名人数</div>
								</u-col>
								<u-col span="2">
									<div class="td">竞争比</div>
								</u-col>
							</u-row>
							<u-row v-for="(b,j) in gwInfo.list" :key="j" align="stretch">
								<u-col span="5">
									<div class="td">{{ b.bmmc }}</div>
								</u-col>
								<u-col span="3">
									<div class="td">{{ b.bmdm }} - {{b.zwdm}}</div>
								</u-col>
								<u-col span="2">
									<div class="td">{{ b.jfrs  }}</div>
								</u-col>
								<u-col span="2">
									<div class="td">{{ b.jzb  }}</div>
								</u-col>
							</u-row>
						</div>
						<div class="con" v-if="conIndex3 == 2">
							<u-row>
								<u-col span="5">
									<div class="td">部门名称</div>
								</u-col>
								<u-col span="3">
									<div class="td">部门代码</div>
								</u-col>
								<u-col span="2">
									<div class="td">报名人数</div>
								</u-col>
								<u-col span="2">
									<div class="td">竞争比</div>
								</u-col>
							</u-row>
							<u-row v-for="(b,j) in gwInfo.bmList" :key="j" align="stretch">
								<u-col span="5">
									<div class="td">{{ b.bmmc }}</div>
								</u-col>
								<u-col span="3">
									<div class="td">{{ b.bmdm }} - {{b.zwdm}}</div>
								</u-col>
								<u-col span="2">
									<div class="td">{{ b.jfrs  }}</div>
								</u-col>
								<u-col span="2">
									<div class="td">{{ b.jzb  }}</div>
								</u-col>
							</u-row>
						</div>
					</div>
					
				</div>
				<div class="item">
					<h2 class="textTlt">岗位详细信息</h2>
				</div>
				<div class="item">
					
					<h3>职位信息</h3>
					<ul>
						<li><span>职位名称:</span>{{zw.zwmc}}</li>
						<li><span>职位代码:</span>{{zw.zwdm}}</li>
						<li><span>招考人数:</span>{{zw.zkrs}}</li>
						<li><span>职位性质:</span>{{zw.zwxz}}</li>
					</ul>
				</div>
				<div class="item">
					<h3>单位信息</h3>
					<ul>
						<li><span>地区:</span>{{zw.city}}</li>
						<li><span>所属系统:</span>{{zw.xt}}</li>
						<li><span>部门名称:</span>{{zw.bmmc}}</li>
						<li><span>部门代码:</span>{{zw.bmdm}}</li>
						<li><span>用人处（科）室:</span>{{zw.yrcs}}</li>
					</ul>
				</div>
				<div class="item">
					<h3>报考条件</h3>
					<ul>
						<li><span>招考对象:</span>{{zw.zkdx}}</li>
						<li><span>学历:</span>{{zw.xl}}</li>
						<li><span>专业:</span>{{zw.zy}}</li>
						<li><span>工作经历:</span>{{zw.gzjl}}</li>
						<li><span>政治面貌:</span>{{zw.zzmm}}</li>
						<li><span>岗位最低服务年限:</span>{{zw.fwnx}}</li>
					</ul>
				</div>
				<div class="item">
					<h3>其他信息</h3>
					<ul>
						<li><span>备注:</span>{{zw.bz}}</li>
					</ul>
				</div>
				<div class="item">
					<h3>雪恒教育-白雪面试温馨提醒</h3>
					<ul>
						<li>职位信息由雪恒教育-白雪面试依据官方职位信息整理编辑，职位预测信息依据往年信息进行计算整理，仅供参考。报考前请仔细阅读对应职位要求或联系招考单位确认，报考失误造成的损失，雪恒教育-白雪面试不承担任何责任。</li>
					</ul>
				</div>
			</div>
			
		</div>
		
		<div class="fixFav">
			<div class="btnBox">
				<u-button type="error" shape="circle" size="mini" text="收藏" icon="heart" @click.native.stop="addFav(zw)" v-if="!favIdList.includes(zw._id)"></u-button>
				<u-button type="info" shape="circle" size="mini" plain text="取消" icon="heart-fill" @click.native.stop="removeFav(zw._id)" v-else></u-button>
			</div>
		</div>
		
		<div class="fixBottom">
			<div class="container">
				<div class="flexBox">
					<div class="btn">
						<u-button type="success" plain text="考试时间详情" @click="toGg()"></u-button>
					</div>
					<div class="btn">
						<u-button type="success" text="收藏职位列表" @click="toSc()"></u-button>
					</div>
				</div>
			</div>
			
		</div>
		<u-toast ref="uToast"></u-toast>
		<div class="loadBox" v-if="loading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database();
	var uChartsInstance = {}
	export default {
		data() {
			return {
				banner:"https://www.baixuemianshi.com/zhuanti/sk_stl/images/banner_zwxq.jpg?" + new Date(),
				gjp: true,
				year: "2022",
				wyz: "",
				zwLink: "https://www.baixuemianshi.com/zhuanti/sk-tools/zwb2023.js",
				linkList: [
					{year: "023", link: "https://hljhd.offcn.com/lynn/2023blzw.js"},
					{year: "2023", link: "https://www.baixuemianshi.com/zhuanti/sk-tools/zwb2023.js?v1"},
					{year: "2022", link: "https://www.baixuemianshi.com/zhuanti/sk-tools/zwb2022.js"},
					{year: "2021", link: "https://www.baixuemianshi.com/zhuanti/sk-tools/zwb2021.js"}
				],
				ringRange: [155, 25],
				position: 0,
				ringStart: 0,
				iid: null,
				
				openid:"",
				favIdList:[],
				
				showIndex: -1
			};
		},
		onShow() {},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onPageScroll(e) {
			let that = this;
			that.scrollTop = e.scrollTop;
		},
		onLoad(options) {
			this.colname = options.colname
			this.id = options.id
			this.getZw()
		},
		computed: {
			percent() {
			  return Math.floor(this.position * 100);
			},
		},
		mounted() {
			
		},
		watch: {},
		created() {
			let that = this;
			that.getopenid()
		},
		onReady() {
			
		},
		methods: {
			getopenid(){
				let that = this
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						that.openid =res.result.openid
						that.getAllFav()
					}
				})
			},
			getAllFav(){
				let that = this
				let fzw = zw.filter(item => item.wyz == that.wyz)
				that.zw = fzw[0]
				that.gjp = false
				// that.getScore()
			},
			showToast(type, info) {
				this.$refs.uToast.show({
					type: type,
					icon: false,
					title: '失败主题',
					message: info,
				})
			},
			showJzb(jfrs,zkrs){
				let jzb = jfrs / zkrs
				jzb % 1 === 0 ? jzb = jzb : jzb = jzb.toFixed(2)
				return jzb
			},
			toyuce(){
				let that = this
				if(!that.ycInfo.mk1 || !that.ycInfo.mk2 || !that.ycInfo.mk3){
					uni.showToast({
						title:"请填写分数",
						icon:"error"
					})
					return
				}
				that.loadYc = true
				
				let ycfs = that.ycData.ycjmfs
				let allScore = parseFloat(that.ycInfo.mk1) + parseFloat(that.ycInfo.mk3) + parseFloat(that.ycInfo.mk2)
				let num1 = ycfs - parseFloat(that.ycInfo.mk1)
				let num2 = ycfs - parseFloat(that.ycInfo.mk2)
				let num3 = ycfs - parseFloat(that.ycInfo.mk3)
				let pjf = allScore / 3
				let pro = 0.5
				
				if(num1 < 0){
					pro += 0.02
				}
				if(num2 < 0){
					pro += 0.05
				}
				if(num3 < 0){
					pro += 0.13
				}
				if(pjf > ycfs){
					pro += 0.15
				}
				setTimeout(function(){
					that.ycPro = pro
					that.loadYc = false
					that.showYc = true
					that.updateRing()
				},2000)
			},
			updateRing() {
				let that = this
				that.position += 0.01;
				if (that.position >= that.ycPro) {
					clearTimeout(that.iid);
					return
				}
				that.iid = setTimeout(that.updateRing, 40);
			},
			cxYc(){
				this.position = 0
				this.showYc = false
			},
			toZx(){
				uni.navigateTo({
					url:'../../webview/index?href=https://www.baixuemianshi.com/zhuanti/zx_ewm/allUser.html'
				})
			},
			toGg(){
				uni.navigateTo({
					url:'../../webview/index?href=https://www.baixuemianshi.com/zhuanti/sk_stl/kssj.php'
				})
			},
			toSc(){
				uni.navigateTo({
					url:'../zwpp/sc'
				})
			}
		},
		components: {}
	};
</script>

<style lang="scss">
	@import url(./index.css);
</style>
